<template>
  <el-container class="contain-body main">
    <el-header>
      <el-row :gutter="20">
        <el-col :span="4" align="left">
          <div style="margin: 5px">
            <img height="50px" src="../../assets/images/loginbg.png"/>
          </div>
        </el-col>
        <el-col :span="16">
          <h2>健康管理系统</h2>
        </el-col>
        <el-col :span="4">
          <el-dropdown class="dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
              个人中心
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">修改密码</el-dropdown-item>
                <el-dropdown-item command="b">编辑资料</el-dropdown-item>
                <el-dropdown-item command="c">个人信息</el-dropdown-item>
                <el-dropdown-item divided command="e">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>

    </el-header>

    <!--    侧边栏   -->

    <el-container>
      <el-aside width="200px" class="container-ssss">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="$route.path"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            router
        >
          <el-menu-item index="/leader">
            <el-icon>
              <HomeFilled/>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>系统公告管理</span>
            </template>
            <el-menu-item index="/notice">系统公告</el-menu-item>
          </el-sub-menu>
          <!---->
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/teacher">用户</el-menu-item>
          </el-sub-menu>
          <!--          -->
          <el-menu-item index="/doctor">
            <el-icon>
              <Avatar/>
            </el-icon>
            <span>医师管理</span>
          </el-menu-item>
          <!--          -->
          <el-menu-item index="/health">
            <el-icon>
              <GoldMedal/>
            </el-icon>
            <span>健康专栏</span>
          </el-menu-item>


          <!--        -->
          <el-menu-item index="/stress">
            <el-icon>
              <List/>
            </el-icon>
            <span>压力测试</span>
          </el-menu-item>
          <!--        -->
          <el-menu-item index="/test">
            <el-icon>
              <Calendar/>
            </el-icon>
            <span>测试数据</span>
          </el-menu-item>
          <!--        -->
          <el-menu-item index="/Appointment">
            <el-icon>
              <Bell/>
            </el-icon>
            <span>医师预约</span>
          </el-menu-item>
          <!--        -->
          <el-menu-item index="/comments">
            <el-icon>
              <Comment/>
            </el-icon>
            <span>留言板</span>
          </el-menu-item>


          <el-menu-item index="/setting">
            <el-icon>
              <setting/>
            </el-icon>
            <span>系统管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!--      main   -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>

import {onMounted} from "vue";
import {getToken, removeToken} from "../../utils/auth";
import {useRouter} from "vue-router";


const router = useRouter()
onMounted(() => {

  console.log(getToken("token"))
})

const sign_up = () => {
  console.log("登出")
  removeToken('token')
  router.push('/Login')
}

const handleCommand = (index) => {
  if (index === "e") {
    sign_up()
  }else if(index === "c"){
    router.push('/user')
  }

}

const handleOpen = (row) => {
  console.log(row)
}
const handleClose = (row) => {
  console.log(row)
}

</script>

<style scoped>
.main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.contain-body {
  height: 100vh;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.dropdown {
  margin-top: 10%;
}

.image {
  background: url("https://img0.baidu.com/it/u=863503243,1550253516&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
  /*height: 100vh;*/
  height: 100%;
  background-size: cover;
}

.container-ssss {
  background-color: #545c64
}
</style>